<template>

    <div class="pag add-member">        
        <div class="weui-cells weui-cells_radio project-type">
            <label 
                class="weui-cell weui-check__label" 
                :for="'x'+type.id"
                v-for="(index, type) in types"
                @click="setType(type.id,type.name)"
                >
                <img class="icon" :src="type.img_url" alt="">
                <div class="weui-cell__bd">
                    <p>{{type.name}}</p>
                </div>
                <div class="weui-cell__ft">
                    <input type="radio" class="weui-check" name="radio1" :id="'x'+type.id" v-bind:checked="selectedTypeId == type.id">
                    <span class="weui-icon-checked"></span>
                </div>
            </label>          
        </div>
    </div>    

    <div v-show="loading">
      <div class="weui-mask"></div>
      <div class="weui-toast">
          <i class="weui-loading weui-icon_toast"></i>
          <p class="weui-toast__content">数据加载中</p>
      </div>
    </div>
</template>

<script>
    /**
     *  引入工具类库 或 Native API
     *  example : import widget from 'gapi/widget'
     */
    import $ from 'zepto'
    import widget from 'gapi/widget.js'
    import cache from 'gapi/cache'
    import * as util from 'js/util.js'
    import clientInfo from 'gapi/clientInfo'
    import commonPage from 'clientApi/commonPage.js'
    /**
     *  引入组件 以及 组件接口(Action)
     *  example : import Somecomponents from 'components/Somecomponents/Somecomponents'
     */

    /**
     *  组件实例对象
     */
    export default {
        components: {

        },
        data: function(){
            return{
                types: [],
                selectedTypeId : '',
                proType: {
                    typeid: '',
                    typename: ''
                },
                loading : false,
            }
        },
        vuex: {
            getters: {

            },
            actions: {

            }
        },
        methods: {
            /**
             * 初始化
             * @method init
             * @public
             * @return {Null} void
             */
            init (){

            },

            //选择类型
            setType (typeId,typeName){
                setTimeout(() => {
                    commonPage.goBack(1,{'key':'proType','value': {
                            typeId: typeId,
                            typeName: typeName
                        }
                    })
                },200)
            }
        },
        created(){

            this.init();

        },
        ready(){
            cache.getMemoryCache('projectTypeId', (data) => {
                if(data && data.val){
                        this.selectedTypeId = data.val
                    }
            })

            //获取项目类型
            util.ajax({
                    url:'/project/type/get',
                    type:'GET',
                    data:{
                        team_id : 0,//fixme
                    },
                    timeout:10000,
                    beforeSend: () => {
                      this.loading = true
                    },
                    success:(result) => {
                        if(result.errno == 0){
                            result.data = result.data.map((o, i, a) => {
                                o.js_img_url = `../../static/imgs/icons/type/icon_${i + 1}.png`
                                return o
                            })
                            this.types = result.data
                            console.log(this.types)
                        }
                    },
                    error: (xhr, status) => {
                        // error  
                        console.log(xhr)
                    },
                    complete: () => {
                      this.loading = false
                    },
                    noNetwork: () => {
                        // 无网络的回调
                        widget.toast('网络连接失败，请检查网络')
                    }
                })
        }

    }


</script>

<!-- CSS 样式 -->
<style src="../../node_modules/weui/dist/style/weui.css"></style>
<style src="../../static/css/common.css"></style>
<style src="../../static/css/project.css"></style>
<style>
    .weui-cells_radio .weui-check:checked + .weui-icon-checked:before {
      display: block;
      content: "";
      width: 18px;
      height: 18px;
      background-image: url(../../static/imgs/single_selected.png);
      background-size: 18px 18px;
      overflow: hidden;
    }
</style>
